<template>
  <div class="contract">
    <!-- 表单 -->
    <div class="content">
      <el-form :inline="true"
               :model="form"
               class="demo-form-inline">
        <el-form-item label="客户姓名"
                      class="name">
          <el-input v-model="form.customerName"
                    placeholder="请输入姓名" class="innerinput"></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="form.mobile" class="inp innerinput"
                    placeholder="请输入手机号码" ></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="form.idCardNumber"
                    placeholder="请输入身份证号 码" class="innerinput"></el-input>
        </el-form-item>
        <el-form-item label="订单状态" >
          <el-select v-model="form.state" class="innerinput">
            <el-option label=""
                       value=""></el-option>
            <el-option label="待查询"
                       value="101"></el-option>
            <el-option label="已通过"
                       value="102"></el-option>
            <el-option label="已拒绝"
                       value="103"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="渠道">
          <el-select
            v-model="form.channelList"
            multiple
            filterable
            allow-create
            default-first-option
            class="innerinput inputselect">
            <el-option label=""
                       value=""></el-option>
            <el-option label="汇成"
                       value="1"></el-option>
            <el-option label="搜卡"
                       value="2"></el-option>
            <el-option label="中南"
                       value="3"></el-option>
            <el-option label="中富"
                       value="4"></el-option>
            <el-option label="汇成联联车"
                       value="5"></el-option>
            <el-option label="汇成中弘"
                       value="6"></el-option>
            <el-option label="协同庆"
                       value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     class="size" @click="searchBtn">查询</el-button>
          <el-button class="yellow" @click="resetBtn">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="panel-main">
      <el-button type="primary" @click="batchDownload">一键下载</el-button>
      <el-button type="success" @click="batchPass">一键通过</el-button>
      <el-button type="warning" @click="batchRefuse">一键拒绝</el-button>
    </div>
    <!-- table数据 -->
    <el-table :data="tableData"
              class="tab"
              @selection-change="tableSelect"
              style="width: 100%">
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column prop="templateName"
                       label="合同名称"
                       >
      </el-table-column>
      <el-table-column prop="channel"
                       label="渠道">
                 <template slot-scope="scope">
                    <span>{{scope.row.channel | channelfliter}}</span>
                 </template>
      </el-table-column>
      <el-table-column prop="customerName"
                       label="姓名">
      </el-table-column>
      <el-table-column prop="idCardNumber"
                       label="身份证号">
      </el-table-column>
      <el-table-column prop="mobile"
                       label="手机号码">
      </el-table-column>
      <el-table-column prop="state"
                       label="订单状态">
                       <template slot-scope="scope">
                         <span>
                           {{scope.row.state | watchStatus}}
                         </span>
                       </template>
      </el-table-column>
      <el-table-column
                       label="操作时间">
        <template slot-scope="scope">
          <span>{{scope.row.state === 101 ? scope.row.createTime : scope.row.updateTime}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="count"
                       label="重复申请">
        <template slot-scope="scope">
          <span>{{scope.row.count > 1 ? '重复' : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="operation"
                       label="操作"
                       width="250px"
                      >
        <template slot-scope="scope">
          <el-button type="text" @click="downBtn(scope.row)">下载</el-button>
          <el-button type="text" @click="passBtn(scope.row)">通过</el-button>
          <el-button type="text" @click="refuseBtn(scope.row)">拒绝</el-button>
          <el-button type="text"
                     @click="viewDetails(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
         layout="prev, pager, next, total"
        @current-change="goNext"
        :page-size="pagination.pageSize"
        :current-page="pagination.currentPage"
        :total="totalPage">
      </el-pagination>
    </div>
    <ViewDetails ref="ViewDetails"></ViewDetails>
  </div>
</template>
<script>
import ViewDetails from './view'
import { GetPersonCredit, viewDetails, PersonalCreditReview, downContract } from '@/api/contract'
import { trim, isArrayNo, downDo } from '@/assets/js/unit.js'
export default {
  data () {
    return {
      form: {
        customerName: '', // 客户姓名
        mobile: '', // 手机号码
        idCardNumber: '', // 身份证号码
        state: '', // 订单状态
        channelList: []
      },
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 10 // 每页显示条数
      },
      totalPage: 0, // 总条数
      tableData: [], // 表格数据
      detailsData: {}, // 详情数据
      batchData: [], // 批量操作数据
      stateArr: [], // 历史状态
      doData: {} // 单个操作数据
    }
  },
  components: {
    ViewDetails
  },
  methods: {
    // 重置
    resetBtn () {
      this.form = {
        customerName: '',
        mobile: '',
        idCardNumber: '',
        state: '',
        channelList: []
      }
      this.pagination = {
        currentPage: 1, // 当前页
        pageSize: 10 // 每页显示条数
      }
      this.getList()
    },
    // 查询
    searchBtn () {
      this.getList()
    },
    // 查询个人征信
    getList () {
      const formData = {
        customerName: trim(this.form.customerName),
        mobile: trim(this.form.mobile),
        idCardNumber: trim(this.form.idCardNumber)
      }
      if (this.form.state !== '') {
        formData.state = Number(this.form.state)
      } else {
        formData.state = Number(101)
      }
      if (this.form.channelList.length !== 0) {
        formData.channelList = this.form.channelList
      }
      const postData = {
        ...formData,
        ...this.pagination,
        templateType: 1,
        transId: '07135001', // 交易码
        accessHost: '1111', // mac地址
        cifSeq: '111'
      }
      GetPersonCredit(postData).then(res => {
        if (res.data.code === '000000') {
          this.tableData = res.data.data.list
          this.totalPage = res.data.data.totalCount
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    // 分页
    goNext (page) {
      this.pagination.currentPage = page
      this.getList()
    },
    // 查看合同详情页面
    viewDetails (data) {
      this.$refs.ViewDetails.isDetailsShow = true
      this.$refs.ViewDetails.detailsData = data
      const postData = {
        accessHost: '111',
        transId: '07135002',
        contractPath: data.pdfContractPath,
        cardFrontPath: data.cardFrontPath,
        cardBackPath: data.cardBackPath,
        facePath: data.facePath
      }
      viewDetails(postData).then(res => {
        if (res.data.code === '000000') {
          this.$refs.ViewDetails.baseData = res.data.data
          this.$refs.ViewDetails.ShowFile(res.data.data.contractBaseStr)
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    // 表格多选
    tableSelect (val) {
      this.batchData = val
    },
    // 个人征信审核
    creditReview () {
      const posData = {
        ...this.doData,
        transId: '07135003', // 交易码
        accessHost: '1111', // mac地址
        cifSeq: '111'
      }
      PersonalCreditReview(posData).then(res => {
        if (res.data.code === '000000') {
          this.getList()
          this.$message({
            type: 'success',
            message: '操作成功'
          })
        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })
        }
      })
    },
    //  批量通过
    batchPass () {
      this.stateArr = []
      const creditList = []
      if (this.batchData.length !== 0) {
        this.batchData.forEach(item => {
          this.stateArr.push(item.state)
        })
        // 判断是否为同一状态
        if (isArrayNo(this.stateArr)) {
          // 批量 ==> 待查询状态
          if (this.stateArr.every(item => { return item === 101 })) {
            this.batchData.forEach(em => {
              creditList.push({
                id: em.id,
                customerId: em.customerId,
                applyId: em.applyId,
                cardFrontPath: em.cardFrontPath,
                cardBackPath: em.cardBackPath
              })
            })
            this.doData = {
              flag: 102,
              state: 101,
              creditList: creditList
            }
            this.creditReview()
            return false
          } else
          // 批量 ==> 已拒绝状态
          if (this.stateArr.every(item => { return item === 103 })) {
            this.batchData.forEach(em => {
              creditList.push({
                id: em.id,
                customerId: em.customerId,
                applyId: em.applyId,
                cardFrontPath: em.cardFrontPath,
                cardBackPath: em.cardBackPath
              })
            })
            this.doData = {
              flag: 102,
              state: 103,
              creditList: creditList
            }
            this.creditReview()
            return false
            // eslint-disable-next-line no-lone-blocks
          } else {
            this.$message({
              type: 'warning',
              message: '状态已经是已通过'
            })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请在同一状态执行批量操作'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '您还没有勾选要操作的合同'
        })
      }
    },
    //  批量拒绝
    batchRefuse () {
      this.stateArr = []
      const creditList = []
      if (this.batchData.length !== 0) {
        this.batchData.forEach(item => {
          this.stateArr.push(item.state)
        })
        // 判断是否为同一状态
        if (isArrayNo(this.stateArr)) {
          // 批量 ==》已通过状态下
          if (this.stateArr.every(item => { return item === 102 })) {
            this.batchData.forEach(em => {
              creditList.push({
                id: em.id,
                customerId: em.customerId,
                applyId: em.applyId
              })
            })
            this.doData = {
              flag: 103,
              state: 102,
              creditList: creditList
            }
            this.creditReview()
            return false
          } else {
            this.$message({
              type: 'warning',
              message: '状态已经是已拒绝'
            })
          }
        } else {
          this.$message({
            type: 'warning',
            message: '请在同一状态执行批量操作'
          })
        }
      } else {
        this.$message({
          type: 'warning',
          message: '您还没有勾选要操作的合同'
        })
      }
    },
    //  单个通过
    passBtn (data) {
      if (data.state !== 102) {
        this.doData = {
          flag: 102,
          state: data.state,
          creditList: [{
            id: data.id,
            customerId: data.customerId,
            applyId: data.applyId,
            cardFrontPath: data.cardFrontPath,
            cardBackPath: data.cardBackPath
          }]
        }
        this.creditReview()
      } else {
        this.$message({
          type: 'warning',
          message: '状态已经是已通过'
        })
      }
    },
    //  单个拒绝
    refuseBtn (data) {
      if (data.state !== 103) {
        this.doData = {
          flag: 103,
          state: data.state,
          creditList: [{
            id: data.id,
            customerId: data.customerId,
            applyId: data.applyId
          }]
        }
        this.creditReview()
      } else {
        this.$message({
          type: 'warning',
          message: '状态已经是已拒绝'
        })
      }
    },
    //  单个下载
    downBtn (data) {
      const postData = {
        transId: '07135008', // 交易码
        accessHost: '1111', // mac地址
        cifSeq: '111',
        contractPath: data.pdfContractPath,
        cardFrontPath: data.cardFrontPath,
        cardBackPath: data.cardBackPath,
        customerName: data.customerName,
        channelName: data.channelName
      }
      downContract(postData).then(res => {
        const str = res.headers['content-disposition']
        downDo(res.data, decodeURI(str.substring(str.lastIndexOf('=') + 1)))
      })
    },
    // 批量下载
    batchDownload () {
      if (this.batchData.length !== 0) {
        this.batchData.forEach(item => {
          this.downBtn(item)
        })
      } else {
        this.$message({
          type: 'warning',
          message: '您还没有勾选要操作的合同'
        })
      }
    }
  },
  created () {
    this.getList()
  },
  filters: {
    channelfliter (status) {
      var i = parseInt(status)
      switch (i) {
        case 1:
          return '汇成'
        case 2:
          return '搜卡'
        case 3:
          return '中南'
        case 4:
          return '中富'
        case 5:
          return '汇成联联车'
        case 6:
          return '汇成中弘'
        case 7:
          return '协同庆'
        default: return ''
      }
    },
    // 把后台数字转成文字
    watchStatus (status) {
      var i = parseInt(status)
      switch (i) {
        case 101:
          return '待查询'
        case 102:
          return '已通过'
        case 103:
          return '已拒绝'
        default: return ''
      }
    }
  }
}
</script>
<style scoped lang="less">
.template-name-lable{
  font-size: 16px;
}
.innerinput /deep/ input{
  width: 0px !important;
  min-width: 140px !important;
  margin-right: 5px;
}
@media screen and(max-width:1550px){
  .innerinput /deep/ input{
  min-width: 120px !important;
}
}
@media screen and(max-width:1450px){
  .innerinput /deep/ input{
  min-width: 100px !important;
}
}
@media screen and(max-width:1350px){
  .innerinput /deep/ input{
  min-width: 80px !important;
}
}
.contract {
  min-width: 100%;
  height: 100%;
  background: #ebebeb;
  .head {
    padding: 15px 0 0 0;
    width: 100%;
    height: 40px;
    font-size: 14px;
    background: white;
    border-radius: 5px;
    .blue {
      width: 20px;
      height: 16px;
      line-height: 20px;
      background-color: rgba(82, 144, 255, 1);
      text-align: center;
      margin-left: 15px;
      border-left: 4px solid rgba(82, 144, 255, 1);
    }
    .pending {
      width: 54px;
      height: 27px;
      color: rgba(16, 16, 16, 1);
      font-size: 18px;
      font-weight: 700;
      text-align: left;
      margin-left: 13px;
      font-family: SourceHanSansSC-bold;
    }
  }
  .content {
    padding-top: 12px;
    width: 100%;
    background: white;
    margin: 10px 0;
    border-radius: 5px;
    min-height: 60px;
    color: black;
    .name {
      margin-left: 10px;
    }
    .size {
      height: 40px;
      border-radius: 4px;
      background-color: rgba(32, 127, 253, 1);
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      text-align: center;
    }
    .yellow {
      height: 40px;
      border-radius: 4px;
      background-color: rgb(242, 188, 31);
      color: rgba(255, 255, 255, 1);
      font-size: 16px;
      text-align: center;
      font-family: Roboto;
      border: 1px solid rgba(255, 255, 255, 0);
    }
    .demo-form-inline{

    }
  }
}
.change {
  width: 100%;
  height: 68px;
  margin: 10px 0;
  background: white;
  margin: 10px 0;
  border-radius: 5px;
  .btn {
    padding: 15px 0 0 20px;
  }
}
.tab {
  width: 100%;
  background: white;
  border-radius: 5px !important;
}
.pagination {
  margin-top: 20px;
  border-radius: 5px;
  text-align: right;
  font-size: 20px;
}
 /deep/ .el-table thead{
  color: black;
}
/deep/ .el-form-item__label{
  color: black;
}
.el-table td, .el-table th{
  text-align: center !important;
}
/deep/ .el-table .cell{
  text-align: center;
}
.inputselect{
  width: 200px;
  /deep/ input{
    width: 200px !important;
  }
}
  .panel-main{
    width: 100%;
    padding: 10px;
    background-color: #fff;
    margin: 10px 0;
    border-radius: 4px;
    box-sizing: border-box;
  }
</style>
